<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>我的账单</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';  /* project id 223509 */
            src: url('//at.alicdn.com/t/font_ohjrs5zdd7psyvi.eot');
            src: url('//at.alicdn.com/t/font_ohjrs5zdd7psyvi.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_ohjrs5zdd7psyvi.woff') format('woff'),
            url('//at.alicdn.com/t/font_ohjrs5zdd7psyvi.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_ohjrs5zdd7psyvi.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family: iconfont;
        }
        body{
            background-color:#F5F4F9;
            font-size:14px;
            color:#333;
        }
        ul{
            background-color:white;
        }
        ul>li{
            height:72px;
            padding:10px;
            box-sizing: border-box;
            border-bottom:1px solid #E4E4E4;
            line-height:25px;
            position:relative;
        }
        ul>li:last-child{
            border:none;
        }
        ul>li i{
            position:absolute;
            right:10px;
            top:50%;
            -webkit-transform:translate(0,-50%);
            font-size:20px;
            color:#A3A3A3;
        }
        ul>li span{
            display:block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        ul>li>div{
            display:inline-block;
        }
        ul>li>div.time{
            min-width:45px;
            color:#A3A3A3;
            padding: 5px 0;
            line-height: 21px;
            vertical-align: top;
        }
        ul>li>div.icon{
            font-size: 31px;
            vertical-align: top;
            line-height: 52px;
            color:#E9651B;
            margin: 0 20px;
        }
        ul>li>div.bill{
            width:-webkit-calc(100% - 116px);
            font-size: 18px;
        }
    </style>
</head>
<body>
<ul id="bill">

</ul>
<script type="text/html" id="Tpl">
    <%if(results){
        for(var i=0;i<results.length;i++){
        var bill = results[i];
    %>
    <li <%if(bill.module=="order"){%>onclick="bill.toBill('<%=bill.moduleId%>')"<%}%>>
        <div class="time">
            <span style="font-size:14px;width:45px;text-align: center"><%=bill.time1%></span>
            <span style="font-size:12px;width:45px;text-align: center"><%=bill.time2%></span>
        </div>
        <div class="iconfont icon">
            <%if(bill.module=='order'&&bill.type ==1){%>
                &#xe63a;
               <%}else if(bill.module=='order'){%>
                &#xe60d;
              <%}else{%>
                &#xe638;
           <%}%>
        </div>
        <div class="bill">
            <%if(bill.type==1){%>
            <span>-<%=bill.money%></span>
            <%}else{%>
            <span>+<%=bill.money%></span>
            <%}%>
            <span style="color: #696969;font-size: 14px;"><%=bill.description%></span>
        </div>
        <%if(bill.module=='order'){%>
        <i class="iconfont">&#xe600;</i>
        <%}%>
    </li>
    <%}}else{%>
        <span style="display: block;text-align: center;background-color: #F5F4F9;font-size: 16px;margin: 10px 0;">暂无账单</span>
    <%}%>
</script>
</body>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var bill ={
        pageSize:10,
        page:0,
        init:function(){
            var me=this;
            this._initEvent();
            $.util.pageLoading.show();
            me._loadList(me.page,function(){
                $.util.pageLoading.hide();
            });
        },
        _initEvent:function(){
            var me=this;
            $.util.initDataLoading({
                me:bill,
                lastChildren:function(){
                    return $("#bill li:last");
                },
                page:function(){
                    return bill.page;
                },
                pageCount:function(){
                    return bill.pageCount;
                }
            });
        },
        _renderList:function(data,page,callback){
            var me=this;
            if(data){
                var html=template("Tpl", data),
                    container = $("#bill");
                container.append(html);
                me.page=page;
                me.pageCount=Math.ceil(data.total/me.pageSize);
                callback && callback();
            }
        },
        _loadList:function(page,callback){
            var me=this;
            $.req.get("call.json?module=purse&customerId={$customerId}&method=getBillList",{
                userName:"{$userName}",
                params: {"tplid":1,"start":page,
                    "limit":me.pageSize}
            },function(data){
                if(data){
                    me._renderList(data,page,callback);
                }
            });
        },
        toBill:function(id){
            location.href='{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=product&method=getOrderDetail&params=%7B%22id%22:'+id+',%22tplid%22:1%7D';
        }
    }
    bill.init();
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        "hideAllnone":true
    });
</script>
</html>